<template>
	<rx-dialog class="rightDesign" @ok="handleSubmit" @cancel="cancel">
		<rx-layout>
            <template #middle>
                <a-form layout="vertical" :model="propsConfig" >
                    <a-row>
                        <a-col :span="20">
                            <a-form-item :label="i18n('propsDialog.props','属性名')">
                                <div class="propsDialog-name" >{{propsItem.name}}</div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="20">
                            <a-form-item :label="i18n('common.valueSource','值来源')">
                                <a-select
                                    v-model:value="propsConfig.valueSource"
                                    :options="valueSourceDef"
                                    @change="sourceChange"
                                >
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <template v-if="propsConfig.valueSource == 'component'">
                        <a-row>
                            <a-col :span="20">
                                <a-form-item :label="i18n('common.calComponent','调用组件')" >
                                    <a-select v-model:value="propsConfig.component" @change="propsConfig.propsValue=''">
                                        <a-select-option v-for="(component,index) in allCustomComponent" :key="index" :value="component.name" >{{component.comment}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="20">
                                <a-form-item  :label="i18n('propsDialog.propsValue','组件属性')" v-if="propsConfig.component">
                                    <a-select  v-model:value="propsConfig.propsValue" :allowClear="true">
                                        <a-select-option v-for="(props_,index) in (componentProps[propsConfig.component] || [])" :key="index" :value="props_.name" >{{props_.name}}({{props_.comment}})</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </template>
                    <a-row v-else>
                        <a-col :span="20">
                            <a-form-item :label="propsConfig.valueSource == 'fixedVar'?i18n('common.fixedValue','固定值'):i18n('propsDialog.scriptMethodName','脚本方法名')">
                                <a-input  v-model:value="propsConfig.propsValue"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </template>
		</rx-layout>
	</rx-dialog>
</template>

<script>
import {Util,RxDialog,RxLayout} from "@lowcode/jpaas-base-lib";

export default {
	name: "PropsDialog",
    components:{
        RxDialog,
        RxLayout
    },
	props:{
		//大屏配置
		screenConfig: {
			type:Object
		},
		//组件配置
		config: {
			type:Object
		},
		//当前属性对象
		propsItem: {
			type:Object
		},
		destroy: {
			type: Function
		},
	},
	data(){
		return{
			propsConfig:{
				valueSource:"fixedVar",//值来源
				component:"",//来源为组件时指定组件
				propsValue:"",
			},
			allCustomComponent:[],//所有自定义组件
			valueSourceDef: [
				{ value: 'fixedVar', label:this.i18n('common.fixedValue','固定值')},
				{ value: 'component', label:this.i18n('common.component',"组件")},
				{ value: 'script',label:this.i18n('common.script',"脚本")}
			],
			componentProps:{},//组件的属性
		}
	},
	created(){
		this.init();
		this.getCustomComponents();
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"dialogLang",key);
		},
		init(){
			if(this.propsItem.propsConfig){
				this.propsConfig=JSON.parse(JSON.stringify(this.propsItem.propsConfig));
			}
		},
		//获取暴露的所有自定义组件
		getCustomComponents(){
            let files = import.meta.glob('@/views/modules/custom-components/**/*.json');
            for (let i = 0; i < this.screenConfig.components.length; i++) {
                let component=this.screenConfig.components[i];
                if(component.type=="custom"){
                    let obj= {
                        customName:component.config.customName,
                        name:component.config.key,
                        comment:component.config.title
                    }
                    for (let path in files) {
                        files[path]().then(mod => {
                            let file=  mod["default"];
                            if(file && file.name==obj.customName){
                                obj=Object.assign(JSON.parse(JSON.stringify(file)),obj);
                                this.allCustomComponent.push(obj);
                                this.componentProps[obj.name]=obj.props;
                            }
                        });
                    }
                }
            }
		},
		handleSubmit() {
			Util.closeWindow(this, "ok",this.propsConfig);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
		sourceChange(){
			this.propsConfig.component="";
			this.propsConfig.propsValue="";
		}
	}
}
</script>

<style scoped>
.propsDialog-name{
	height: 40px;
	line-height: 40px;
	padding: 0px 14px;
	background-color: #f8f8f8;
	border-radius: 4px;
	border: solid 1px #dedede;
	color: #333333;
}
</style>
